<template>
    <div>
        <van-field v-model="selectedName" is-link readonly label="选择人员" placeholder="点击选择人员"
            @click="showPicker = true" />

        <van-popup v-model:show="showPicker" position="bottom" round :style="{ height: '80%' }">
            <van-nav-bar title="选择人员" left-text="取消" right-text="确定" @click-left="showPicker = false"
                @click-right="handleConfirm" />

            <div class="picker-container">
                <!-- 左侧部门树（调整宽度） -->
                <van-tree-select v-model:active-id="activeDeptId" v-model:main-active-index="mainActiveIndex"
                    :items="deptTree" class="dept-tree" />

                <!-- 右侧人员列表 -->
                <div class="user-list">
                    <van-radio-group v-model="selectedUserId">
                        <template v-if="currentDeptUsers.length > 0">
                            <van-cell v-for="user in currentDeptUsers" :key="user.id" :title="user.name"
                                :label="`${user.phone}`" clickable @click="selectedUserId = user.id">
                                <template #right-icon>
                                    <van-radio :name="user.id" />
                                </template>
                            </van-cell>
                        </template>
                        <van-empty v-else description="该部门暂无人员" />
                    </van-radio-group>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const showPicker = ref(false);
const selectedUserId = ref('');

// 部门树数据（示例）
const deptTree = ref([
    {
        text: '总部',
        id: 1,
        children: [
            { text: '研发部', id: 11 },
            { text: '营销部', id: 12 },
            { text: '人力资源', id: 13 }
        ]
    },
    // 更多部门...
]);

// 人员数据（示例）
const allUsers = {
    11: [
        { id: 'u1', name: '张三', phone: '13356899689', },
        { id: 'u2', name: '李四', phone: '13356899689', }
    ],
    12: [
        { id: 'u1', name: '王五', phone: '13356899689', },
        { id: 'u2', name: '张七', phone: '13356899689', }
    ],
    // 更多人员...
};

const selectedName = computed(() => {
    const user = Object.values(allUsers).flat().find(u => u.id === selectedUserId.value);
    return user?.name || '';
});

const activeDeptId = ref(11);
const mainActiveIndex = ref(0);

const currentDeptUsers = computed(() => {
    return allUsers[activeDeptId.value] || [];
});

const handleConfirm = () => {
    showPicker.value = false;
};
</script>

<style scoped>
/* 核心宽度调整 */
.picker-container {
    display: flex;
    height: calc(100vh - 46px - 50px);
}

/* 部门树宽度优化 */
.dept-tree {
    width: 50%;
    /* 修改为50%宽度 */
    height: 100%;
    overflow-y: auto;
    background: #f7f8fa;
}

/* 调整各级缩进 */
:deep(.van-tree-select__item) {
    padding-left: 16px !important;
}

:deep(.van-tree-select__nav) {
    width: 50% !important;
    /* 设置第一级和第二级占50% */
    min-width: 60px;
}

:deep(.van-tree-select__content) {
    width: 50% !important;
    /* 设置第二级内容占50% */
    left: 50% !important;
}

:deep(.van-tree-select__nav-item) {
    padding: 10px 16px !important;
}

:deep(.van-tree-select__item)
{
    padding: 0px 10px!important;
}

/* 文本换行优化 */
:deep(.van-tree-select__item-text),
:deep(.van-tree-select__nav-text) {
    white-space: normal !important;
    word-break: break-all !important;
    line-height: 1.4 !important;
}

.user-list {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    background: #fff;
}

/* 单选按钮样式 */
:deep(.van-radio) {
    margin-left: 12px;
}
</style>
